<template>
	<view class="container">
		<!--头部-->
		<view class="titleBorder">
			<text class="a">可收购{{shellData.name||''}}</text>
			<text class="b">{{shellData.diesVenit||''}}</text>
		</view>
		
		<!--公司-->
		<view class="listCar">
			<view class="listCarTitle">选择公司</view>
			<view class="listCarDetails"   >
				<view class="listItem" @tap="nomytap(index,item)" v-for="(item,index) in listCar" :key="index">
					<view class="listItem-img"></view>
					<view class="listItem-text">
						<view class="listItem-text1 clamp">{{item.buyer_name}}</view>
						<view class="listItem-text2">平均{{item.effective_hour}}小时到账</view>
					</view>
					<!-- 按钮 -->
					<view  class="xzBtnClass"  v-if="index == acticve">
						<image src="../../../static/images/center/xuanzhong.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 按钮确认 -->
		<view class="btn" type="default" @tap="goChangeZh">确认申请收购</view>
		
		
	</view>
</template>

<script>
	import {gsList} from "@/api/shell.js";
	export default {
		data(){
			return{
				acticve:-1,
				listCar:[],
				shellData: {},
				selectCompany: {}
			}
		},
		onLoad(options){
			this.shellData = JSON.parse(decodeURIComponent(options.data))
			this.loadList()
		},
		
		methods:{
			//初始化数据
			loadList(){
				gsList().then(res => {
					this.listCar = res.data;
					this.selectCompany = this.listCar[0]
				})
			},
			nomytap(index,item){
				this.acticve = index;
				this.selectCompany = item
			},
			goChangeZh(){
				if(this.acticve==-1){
					uni.showToast({
						icon:"none",
						title:"请选择收购公司"
					})
				}else{
				  	uni.navigateTo({
				  		url:`shell-sl?company=${encodeURIComponent(JSON.stringify(this.selectCompany))}&shell=${encodeURIComponent(JSON.stringify(this.shellData))}`
				  	})	
				}
			}
		}
	}
</script> 
<style>
	page{
		background-color: #f5f5f5;
	}
</style>
<style scoped lang="scss">
	.container{
		padding-bottom: 200rpx;
		padding-bottom: calc(200rpx + env(safe-area-inset-bottom));
	}
	.titleBorder{
		width:690rpx;
		height:140rpx;
		padding: 30rpx;
		box-sizing: border-box;
		border-radius: 10rpx;
		background-color: #fff;
		margin: 30rpx;
		display: flex;
		align-items: center;
		font-weight: bold;
		box-shadow: 0 0 10rpx rgba(0,0,0,0.05);
		.a{
			color: #666;
			font-size: 30rpx;
			margin-right: 20rpx;
		}
		.b{
			color: #333;
			font-size: 44rpx;
		}
	}
	
	
	.listCar{
		margin:60rpx 30rpx 30rpx;
		width: 690rpx;
		padding: 30rpx;
		box-sizing: border-box;
		border-radius: 10rpx;
		background: #FFFFFF;
		box-shadow: 0 0 10rpx rgba(0,0,0,0.05);
		.listCarTitle{
			font-size: 32rpx;
			font-weight: 600;
			color: #333333;
			margin-bottom: 20rpx;
		}
		.listItem{
			display:flex;
			width:620rpx;
			height:100rpx;
			padding: 30rpx 0;
			position:relative;
			border-bottom: 1rpx solid #fafafa;
			.listItem-img{
				width: 100rpx;
				height: 100rpx;
				background: linear-gradient(138deg, #F3943B 0%, #FC7340 100%);
				border-radius: 10rpx;
			}
			.listItem-text{
				width:400rpx;
				height:100rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				margin-left: 20rpx;
				.listItem-text1{
					font-size: 32rpx;
					color: #333333;
				}
				.listItem-text2{
					font-size: 24rpx;
					color: #999999;
				}
			}
			.xzBtnClass{
				position: absolute;
				right: 0;
				top: 55rpx;
				width:50rpx;
				height:50rpx;
				margin:auto;
				image{
					width: 100%;
					height: 100%;
				}
			}
		}
		.listItem:last-child{
			border: none;
		}
	}
	.btn {
		position: fixed;
		left: 30rpx;
		background-color: $theme-color;
		bottom: 80rpx;
		bottom: calc(80rpx + env(safe-area-inset-bottom));
		width: 690rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		font-size: 32rpx;
		font-weight: bold;
		color: rgba(255, 255, 255, 1);
		border-radius: 40rpx;
		box-shadow: 0 0 10rpx rgba(0,0,0,0.05);
	}
</style>
